
<!DOCTYPE html>
<html lang="zh-cn">

<head><meta name="generator" content="Hexo 3.8.0">
    <title>
        主题说明 - Admui 开发文档</title>
    <meta charset="utf-8">
    <meta name="keywords" content="admui,admui官网,admui框架,通用后台管理系统,后台框架,ui框架">
    <meta name="description" content="Admui 是一个基于最新 Web 技术的企业级通用管理系统快速开发框架，可以帮助企业极大的提高工作效率，节省开发成本，提升品牌形象">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!--[if lte IE 9]>
    <meta http-equiv="refresh" content="0; url='http://www.admui.com/ie'" />
    <![endif]-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">
    <meta name="msapplication-TileImage" content="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <meta name="msapplication-TileColor" content="#395b81">
    <link rel="apple-touch-icon-precomposed" href="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <link rel="shortcut icon" href="http://cdn.admui.com/site/img/app/favicon.png">
    <meta name="msapplication-TileColor" content="#62a8ea">
    <script>
        window.PAGE_TYPE = "ui"
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?cd758c4c82a4964836712308cb782b12";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <link rel="stylesheet" href="http://cdn.admui.com/docs/v2/css/page.css">
</head>

<body>
    <div id="mobile-bar">
        <a class="menu-button"></a>
        <a class="logo" href="../index.html">Admui开发文档</a>
        <select class="version-select">
            <option value="basic">基础版</option>
            <option value="pjax" selected>pjax版</option>
            <option value="iframe">iframe版</option>
        </select>
    </div>
    <div id="header">
    <a id="logo" href="../index.html">
        <img src="http://cdn.admui.com/docs/images/logo.svg"> <span>Admui 开发文档</span>
    </a>
    <select class="version-select">
        <option value="basic">基础版</option>
        <option value="pjax" selected>pjax版</option>
        <option value="iframe">iframe版</option>
    </select>
    <ul id="nav">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../1.x/index.html" class="nav-link">v1版本</a>
</li>

    </ul>
</div>
    
    <div id="main" class="fix-sidebar">
        
        
<div class="sidebar">
    <ul class="main-menu">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../1.x/index.html" class="nav-link">v1版本</a>
</li>

    </ul>
    <div class="list">
        <ul class="menu-root">
            
            <li>
                <a href="../../basic/ui/index.html" class="sidebar-link ">基本概述</a>
            </li>
            
            <li>
                <a href="../../basic/ui/themes.html" class="sidebar-link current ">主题说明</a>
            </li>
            
            <li>
                <a href="../../basic/ui/build.html" class="sidebar-link ">构建工具</a>
            </li>
            
            <li>
                <a href="../../basic/ui/files.html" class="sidebar-link ">入口文件</a>
            </li>
            
            <li>
                <a href="../../basic/ui/structure.html" class="sidebar-link ">模板结构</a>
            </li>
            
            <li>
                <a href="../../basic/ui/hello-world.html" class="sidebar-link ">Hello world</a>
            </li>
            
            <li>
                <a href="../../basic/ui/style.html" class="sidebar-link ">自定义样式</a>
            </li>
            
            <li>
                <a href="../../basic/ui/javascript.html" class="sidebar-link ">Javascript 方法</a>
            </li>
            
            <li>
                <a href="../../basic/ui/components.html" class="sidebar-link ">UI 组件</a>
            </li>
            
            <li>
                <a href="../../basic/ui/plugins.html" class="sidebar-link ">第三方插件</a>
            </li>
            
            <li>
                <a href="../../basic/ui/icons.html" class="sidebar-link ">字体图标</a>
            </li>
            
            <li>
                <a href="../../basic/ui/code-guide.html" class="sidebar-link ">编码规范</a>
            </li>
            
        </ul>
    </div>
</div>


<div class="content ui with-sidebar">
    <h1>主题说明</h1>
    <p>如果您购买的前端源码是自动构建，则主题位于<code>/src/themes/</code>下，如果是基础源码，则主题位于<code>/public/themes/</code>下。</p>
<h2 id="全局文件夹"><a href="#%E5%85%A8%E5%B1%80%E6%96%87%E4%BB%B6%E5%A4%B9" class="headerlink" title="全局文件夹"></a>全局文件夹</h2><p>全局文件夹包含了预编译的文件资源，<code>Scss</code>、<code>JavaScript</code>等，可以通过我们提供的 Gulp 自动化构建工具自动构建<code>Scss</code>、<code>JavaScript</code>等源文件，这些资源文件提供给当前主题的所有布局使用。</p>
<p>如果您不熟悉 Gulp，您可以通过直接修改最终生成的静态资源<code>css</code>，<code>js</code>文件。当然，绝大部分情况下，我们并不需要修改全局的布局和样式，也就不用修改这些文件。</p>
<p>如果您购买源码时选择的前端源码是自动构建，全局文件夹大体结构如下：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">/src/themes/global/</span><br><span class="line">    ├── js/</span><br><span class="line">    │   ├── components/ (注册组件)</span><br><span class="line">    │   ├── configs/ (配置信息)</span><br><span class="line">    │   └── plugins/ (自定义方法)</span><br><span class="line">    └── scss/</span><br><span class="line">        ├── bootstrap/ (bootstrap源文件)</span><br><span class="line">        ├── bootstrap-extend/ (bootstrap覆盖文件)</span><br><span class="line">        ├── vendor/ (插件)</span><br><span class="line">        ├── bootstrap.scss</span><br><span class="line">        ├── bootstrap-extend.scss</span><br><span class="line">        ├── _vars*.scss</span><br><span class="line">        └── ...</span><br></pre></td></tr></table></figure>
<p>如果您购买源码时选择的前端源码是基础源码，全局文件夹大体结构如下：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">/public/themes/global/</span><br><span class="line">    └── js/</span><br><span class="line">        ├── components/ (注册组件)</span><br><span class="line">        ├── configs/ (配置信息)</span><br><span class="line">        ├── plugins/ (自定义方法)</span><br><span class="line">        └── components.js (合并后的注册组件)</span><br><span class="line">    └── css/</span><br><span class="line">        └── bootstrap.css</span><br></pre></td></tr></table></figure>
<h2 id="布局文件夹"><a href="#%E5%B8%83%E5%B1%80%E6%96%87%E4%BB%B6%E5%A4%B9" class="headerlink" title="布局文件夹"></a>布局文件夹</h2><p>如果您购买源码时选择的前端源码是自动构建，布局文件夹包含完整的基础模块以及布局和皮肤的样式文件。布局文件夹大体结构如下:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">/src/themes/base/</span><br><span class="line">    ├── js/</span><br><span class="line">    │   ├── app.js (公共方法)</span><br><span class="line">    │   └── site.js（核心方法）</span><br><span class="line">    └── scss/</span><br><span class="line">        ├── layouts/ (布局)</span><br><span class="line">        ├── sections/ (组件)</span><br><span class="line">        ├── skins/ (皮肤)</span><br><span class="line">        ├── _vars*.css (scss变量)</span><br><span class="line">        └── site.scss</span><br></pre></td></tr></table></figure>
<p>如果您购买源码时选择的前端源码是基础源码，布局文件夹大体结构如下：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">/public/themes/base/</span><br><span class="line">    ├── js/</span><br><span class="line">    │   ├── app.js (公共方法)</span><br><span class="line">    │   └── site.js（核心方法）</span><br><span class="line">    └── css/ (布局样式)</span><br><span class="line">        ├── skins/(皮肤样式文件)</span><br><span class="line">        ├── index.css</span><br><span class="line">        └── site.css</span><br></pre></td></tr></table></figure>
<p>如果您希望定制主题或通过 Gulp 自动构建项目，您可以通过在线升级的方式购买自动构建部分。<a href="http://www.admui.com/user" target="_blank" rel="noopener">升级</a></p>

    
    <div class="page-links">
        
        <span><a href="index.html">&lang; 上一页：基本概述</a></span>
        
        
        <span style="float:right"><a href="build.html">下一页：构建工具 &rang;</a></span>
        
    </div>
    
    <div class="footer">
    &copy; 2015-2018
    <a href="http://www.admui.com/">Admui</a>
    ·
    上海畅控
</div>
</div>

        
    </div>
    

    <script src="https://cdn.staticfile.org/smooth-scroll/14.2.1/smooth-scroll.min.js"></script>
    <script src="http://cdn.admui.com/docs/common/js/common.js"></script>

    <script src="https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            FastClick.attach(document.body);
        }, false);
        (function () {
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>

</body>

</html>